<%--
  Created by IntelliJ IDEA.
  User: 小袁啊
  Date: 2024/10/25
  Time: 下午6:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>盘点审核页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--全部信息--%>
    <template>
        <el-table
                border
                :data="invenInFo"
                style="width: 100%">
            <el-table-column
                    prop="invenid"
                    label="盘点编号">
            </el-table-column>
            <el-table-column
                    prop="invenstaffid"
                    label="盘点员工id">
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    label="盘点员工">
            </el-table-column>
            <el-table-column
                    prop="inventime"
                    label="盘点时间">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="审核状态">
                <template slot-scope="scope">
                    <el-tag
                            v-if="scope.row.state==2"
                            type="success">
                        审核通过
                    </el-tag>
                    <el-tag
                            v-else-if="scope.row.state==1"
                            type="warning">
                        等待审核
                    </el-tag>
                    <el-tag
                            v-else
                            type="danger">
                        审核驳回
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    prop="branchid"
                    label="所属分店id">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            @click="xiangxixinxi(scope.row)">
                        详细信息
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <%--如果处于审核状态，就显示审核按钮，否则不显示--%>
                    <span v-if="scope.row.state==1">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.row)">
                            通过
                        </el-button>
                        <el-button
                                size="mini"
                                type="info"
                                @click="bohuiFangFa(scope.row)">
                            驳回
                        </el-button>
                    </span>
                    <span v-else>
                            完成
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <%--分页 --%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </template>
    <%--===========================详细信息对话框===============================================================================--%>
    <el-dialog title="详细信息对话框" :visible.sync="editDialogFormVisible" width="40%">
        <el-table
                :data="xiangxiform"
                border
                style="width: 100%">
            <el-table-column
                    prop="lid"
                    label="报损编号id">
            </el-table-column>
            <el-table-column
                    prop="goods.goodsname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="invennum"
                    label="盘点数量">
            </el-table-column>
            <el-table-column
                    prop="lossnum"
                    label="报损数目">
            </el-table-column>
        </el-table>
    </el-dialog>
        <%--驳回对黄框--%>
<%--    <el-dialog--%>
<%--            title="驳回理由"--%>
<%--            :visible.sync="boDuiHuaKuang"--%>
<%--            width="30%">--%>
<%--        <el-form :model="boform">--%>
<%--            <el-form-item label="驳回理由">--%>
<%--                <el-input v-model="boform.remarks" autocomplete="off"></el-input>--%>
<%--            </el-form-item>--%>
<%--        </el-form>--%>

<%--        <div slot="footer" class="dialog-footer">--%>
<%--            <el-button @click="boDuiHuaKuang = false">取 消</el-button>--%>
<%--            <el-button type="primary" @click="bohuiFangFa(this.boform[1])">确 定</el-button>--%>
<%--        </div>--%>
<%--    </el-dialog>--%>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            //分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            invenInFo: [],//显示所有商品信息
            editDialogFormVisible: false,//详细信息对话框显示隐藏
            xiangxiform: {},//详细信息的表单对象
            form: {},
        },
        //自启动
        created() {
            this.loadInvenList();//加载盘点信息
        },
        //方法
        methods: {
            //通过盘点审核
            handleEdit(row) {
                //console.log(row);
                axios.get("/inventory/updateStateYes?invenid=" + row.invenid + "&branchid=" + row.branchid).then(resp => {
                    if (resp.data.code == 200) {
                        this.$message({
                            message: '审核通过',
                            type: 'success'
                        });
                        this.loadInvenList();
                    } else {
                        this.$message.error("审核失败");
                    }
                })
            },
            //驳回审核
            bohuiFangFa(row) {
                this.$prompt('请输入驳回理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    //发送请求
                    axios.get("/inventory/updateStateNo?invenid=" + row.invenid+"&remarks="+value).then(resp => {
                        if (resp.data.code == 200) {
                            this.$message({
                                message: '驳回成功',
                                type: 'success'
                            });
                            this.loadInvenList();
                        } else {
                            this.$message.error("驳回失败");
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            //查询详细信息
            xiangxixinxi(row) {
                axios.get("/inventory/getInventoryById?invenid=" + row.invenid).then(resp => {
                    //console.log(resp);
                    this.xiangxiform = resp.data.data;
                    this.editDialogFormVisible = true;
                })
            },
            //加载盘点信息
            loadInvenList() {
                axios.post("/inventory/listInventory?currentPage=" + this.currentPage +
                    "&pageSize=" + this.pageSize, this.form).then(resp => {
                    //console.log(resp);
                    this.invenInFo = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            // 每页数据条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadInvenList();
            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadInvenList();
            },
        }
    })
</script>
</html>
